<script lang="ts" setup>
import { defineProps } from 'vue'
import { formatDateTime } from '../../../../utils/tool'
const props = defineProps<{
  recordList: ListRechargeRecord[],
  loading: boolean
}>()

</script>

<template>
  <el-table
      border
      stripe
      v-model:data="props.recordList"
      table-layout="auto"
      v-loading="loading"
      style="width: 100%"
      height="500px">
    <el-table-column
        :show-overflow-tooltip="true"
        prop="merchantId"
        label="商户订单号"
        width="240"
        align="center"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        prop="phone"
        label="用户手机号"
        width="240"
        align="center"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        prop="details"
        label="充值明细"
        align="center"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        prop="price"
        label="付款金额"
        width="130"
        align="center"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        prop="orderTime"
        label="付款时间"
        width="240"
        align="center"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        label="记录时间"
        width="240"
        align="center"
    >
      <template #default="scope">
        {{formatDateTime(scope.row.createTimeAt)}}
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="less" scoped>

</style>